%section
  %a.scroll-target{name: 'buttons'}
  %h3.color-black Buttons
  %p
    Use these classes on any HTML element that you would like to look and
    act like a button.

  %a.scroll-target{name: 'buttons__standard'}
  %h3.color-black Standard Button
  .panel--padded
    %h4 Primary
    %p
      %button{type: 'button', class: 'btn'}
        Button
    %p
      %a{href: '#', class: 'btn'}
        Link
    %code
      %p= "<button type='button' class='btn'>Button</button>"
      %p= "<a href='#' class='btn'>Link</a>"

    %h4 Secondary
    %p
      %button{type: 'button', class: 'btn btn--secondary'}
        Button
    %p
      %a{href: '#', class: 'btn btn--secondary'}
        Link
    %code
      %p= "<button type='button' class='btn btn--secondary'>Button</button>"
      %p= "<a href='#' class='btn btn--secondary'>Link</a>"

    %h4 White
    %p
      %button{type: 'button', class: 'btn btn--white'}
        Button
    %p
      %a{href: '#', class: 'btn btn--white'}
        Link
    %code
      %p= "<button type='button' class='btn btn-secondary'>Button</button>"
      %p= "<a href='#' class='btn btn-secondary'>Link</a>"


%section
  %a.scroll-target{name: 'buttons__flat'}
  %h3.color-black Flat Button
  %p Same as the standard button, but without depth.
  .panel--padded
    %h4 Primary
    %p
      %button{type: 'button', class: 'btn btn--flat'}
        Button
    %p
      %a{href: '#', class: 'btn btn--flat'}
        Link
    %code
      %p= "<button type='button' class='btn btn--flat'>Button</button>"
      %p= "<a href='#' class='btn-flat'>Link</a>"

    %h4 Secondary
    %p
      %button{type: 'button', class: 'btn btn--flat btn--secondary'}
        Button
    %p
      %a{href: '#', class: 'btn btn--flat btn--secondary'}
        Link
    %code
      %p= "<button type='button' class='btn btn--flat btn--secondary'>Button</button>"
      %p= "<a href='#' class='btn btn--flat btn--secondary'>Link</a>"

    %h4 White
    %p
      %button{type: 'button', class: 'btn btn--flat btn--white'}
        Button
    %p
      %a{href: '#', class: 'btn btn--flat btn--white'}
        Link
    %code
      %p= "<button type='button' class='btn btn--flat btn--white'>Button</button>"
      %p= "<a href='#' class='btn btn--flat btn--white'>Link</a>"

%section
  %a.scroll-target{name: 'buttons__block'}
  %h3 Block Button
  %p
    Apply the .btn--block class to any button that should fit the width of
    the parent container.

  .panel--padded
    %p
      %button{type: 'button', class: 'btn btn--block'}
        Button
    %p
      %a{href: '#', class: 'btn btn--block'}
        Link
    %code
      %p= "<button type='button' class='btn btn--block'>Button</button>"
      %p= "<a href='#' class='btn btn-block'>Link</a>"

%section
  %a.scroll-target{name: 'buttons__fab'}
  %h3.color-black Floating Action Button
  %p
    A Material design pattern, the
    = link_to "floating action button", 'https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-large-screens', target: '_'
    triggers the primary action of the page it lives on.
  .panel--padded
    %p
      %a{href: '#', class: 'fab'}
        = i('add')
    %p
      %a{href: '#', class: 'fab fab--primary'}
        = i('edit')

    %code
      %p= "<a href='#' class='fab'><i class='material-icon'>add</i></a>"
      %p= "<a href='#' class='fab fab--primary'><i class='material-icon'>edit</i></a>"
